<template>
    <div class="dashboard">
        <!-- 页头部分 -->
        <el-row :gutter="20" class="header">
            <el-col :span="8">
                <el-button type="primary" icon="el-icon-s-home">全校数据</el-button>
            </el-col>
            <el-col :span="8" class="stats">
                <div class="stat">
                    <h3>学生人数</h3>
                    <span class="count">7</span>
                </div>
                <div class="stat">
                    <h3>创建作品数量</h3>
                    <span class="count">0</span>
                </div>
                <div class="stat">
                    <h3>累计授课次数</h3>
                    <span class="count">2</span>
                </div>
            </el-col>
        </el-row>

        <!-- 评价部分 -->
        <el-row :gutter="20" class="content">
            <el-col :span="24">
                <el-card>
                    <el-select v-model="selectedCourse" placeholder="全部课程">
                        <el-option label="全部课程" value="all"></el-option>
                        <!-- 添加更多选项 -->
                    </el-select>
                    <div class="empty-data">数据为空</div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 统计部分 -->
        <el-row :gutter="20" class="content">
            <el-col :span="12">
                <el-card>
                    <h3>各年级练习正确率</h3>
                    <el-select v-model="selectedGrade" placeholder="选择年级">
                        <el-option label="12年级" value="12"></el-option>
                        <!-- 添加更多选项 -->
                    </el-select>
                    <el-chart :options="gradeChartOptions"></el-chart>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <h3>授课课程</h3>
                    <el-select v-model="selectedCourse" placeholder="选择课程">
                        <el-option label="课程1" value="course1"></el-option>
                        <!-- 添加更多选项 -->
                    </el-select>
                    <div class="empty-data">数据为空</div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 作品数量部分 -->
        <el-row :gutter="20" class="content">
            <el-col :span="24">
                <el-card>
                    <h3>各年级创作作品数量</h3>
                    <el-select v-model="selectedApp" placeholder="所有应用">
                        <el-option label="所有应用" value="all"></el-option>
                        <!-- 添加更多选项 -->
                    </el-select>
                    <div class="empty-data">数据为空</div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectedCourse: '',
            selectedGrade: '',
            selectedApp: '',
            gradeChartOptions: {
                // 配置图表选项
            }
        };
    }
}
</script>

<style scoped>
.dashboard {
    padding: 20px;
}
.header {
    margin-bottom: 20px;
}
.stats {
    display: flex;
    justify-content: space-between;
}
.stat {
    text-align: center;
}
.count {
    display: block;
    font-size: 2em;
    color: #f56c6c;
}
.content {
    margin-bottom: 20px;
}
.empty-data {
    text-align: center;
    padding: 50px 0;
    color: #ccc;
}
</style>
